<style>
    .dhh-channel-manage-tab {
        height: 789px;
        margin-top: 10px;
        float: left;
        width: 100%;
    }
    
    .input-box {
        height: 30px;
        float: left;
        width: 100%;
        margin-top: 30px;
        margin-left: 30px;
    }
    
    .click-opraty {
        font-size: 20px;
        cursor: pointer;
        margin: 5px;
    }
    
    #show-distributors {
        float: left;
        padding: 15px;
        width: 100%;
        height: 100%;
    }
    
    .input-box {
        height: 30px;
        float: left;
        width: 100%;
        margin-top: 30px;
        margin-left: 30px;
    }
    
    .input-line-1 {
        height: 30px;
        width: 40%;
        display: inline-block;
        float: left;
        margin-bottom: 5px;
    }
    
    .input-line-1 label {
        height: 30px;
        width: 30%;
        float: left;
        line-height: 30px;
        -text-indent: 10px;
        text-align: right;
        padding-right: 2%;
    }
    
    .input-line-1 input,
    .input-line-1 select {
        height: 30px;
        width: 60%;
        float: left;
        border: solid 1px lightgray;
        text-indent: 15px;
    }
</style>
<div id="dhh-channel-manage" class="show_page_content">
    <!-- 顶部按钮 -->
    <div class="dhh-channel-manage-tab">
        <table id="dhh-channel-manage-table"></table>
    </div>
</div>
<div id="dhh-channel-add" class="show_page_content" style="display:none;">
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">用户名：</label>
            <input type="text " placeholder="请输入用户名" class="app_numx val" id="username" field="username" rexg="" msg="" rexIndex="">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">密码：</label>
            <input type="password" placeholder="请输入密码" class="app_num val" id="password" field="userpass" rexg="^(?=.*[a-z])|(?=.*[A-Z])(?=.*\d)(?=.*?[#?!@$%^&*-]).{6,}$" msg="最少6位，大写小写字母数字或特殊字符" rexIndex="0">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">确认密码：</label>
            <input type="password" placeholder="请输入确认密码" class="app_num val" id="yespassword" field="c_userpass" rexg="^(?=.*[a-z])|(?=.*[A-Z])(?=.*\d)(?=.*?[#?!@$%^&*-]).{6,}$" msg="最少6位，大写小写字母数字或特殊字符" rexIndex="1">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 auto_25">
            <label for=" ">邮箱：</label>
            <input type="text " placeholder="请输入邮箱" class="app_num val" id="email" field="email" rexg="^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$" msg="邮箱格式不正确" rexIndex="2">
        </div>
        <span id=""></span>
    </div>
</div>
<script>
    layui.use(["table"], function() {
        var laytab = layui.table;
        //laydate 时间控件
        var heigth = $("#page-container").height() - 30;
        $(".dhh-channel-manage-tab").height(heigth);
        //搜索
        $("#hometotal-search").on("click", function() {
            laytab.reload('usertable');
        });


        delRow("#dhh-channel-manage .del", "/distributors/del", function() {
            laytab.reload('usertable', {
                where: {
                    title: $("#app_name").val(),
                }
            });
        });
        $("#dhh-channel-manage").on("click", ".edit", function() {
            var val = JSON.parse($(this).attr("d"));
            var rex = [0, 0, 0];
            var that = this;
            var id = val.id;
            var index = layer.open({
                type: 1,
                shade: 0.6,
                title: "修改渠道商信息",
                area: [$(document).width() * 0.4 + "px", $(document).height() * 0.7 + "px"],
                btn: ["修改"],
                id: "edit-applist",
                content: $("#dhh-channel-add").html(),
                yes: function() {
                    if ($("#username").val() == "") {
                        layer.msg("请输入用户名！", {
                            icon: 0,
                            time: 1500
                        });
                        return false;
                    }
                    if ($("#password").val() == "") {
                        layer.msg("请输入密码！", {
                            icon: 0,
                            time: 1500
                        });
                        return false;
                    }
                    if ($("#yespassword").val() == "") {
                        layer.msg("请输入确认密码！", {
                            icon: 0,
                            time: 1500
                        });
                        return false;
                    }
                    if ($("#password").val() != "" && $("#yespassword").val() != "" && $("#password").val() != $("#yespassword").val()) {
                        $("#yespassword").parent().next().html("<span style='color:indianred'>确认密码错误！</span>");
                        $("yespassword").parent().next().css("border", "solid 1px indianred");
                        rex[Number($("yespassword").attr("rexIndex"))] = 1;
                        return false;
                    }
                    if ($("#email").val() == "") {
                        layer.msg("请输入邮件！", {
                            icon: 0,
                            time: 1500
                        });
                        return false;
                    }
                    if ($("#password").val() && $("#yespassword").val() && $("#email").val() && $("#username").val()) {
                        var y = 0;
                        for (var i = 0; i < rex.length; i++) {
                            y += rex[i];
                        }
                        if (y == 0) {
                            $.ajax({
                                url: "/distributors/edit",
                                type: "post",
                                dataType: "json",
                                data: {
                                    username: $("#username").val(),
                                    userpass: $("#password").val(),
                                    c_userpass: $("#yespassword").val(),
                                    email: $("#email").val(),
                                    id: id
                                },
                                beforeSend: function() {
                                    loadIndex = layer.load(0);
                                },
                                success: function(d) {
                                    layer.close(loadIndex);
                                    if (d.result == "1") {
                                        $("#username").val("");
                                        $("#password").val("");
                                        $("#yespassword").val("");
                                        $("#email").val("");
                                        layer.msg("添加成功！", {
                                            icon: 1,
                                            time: 1500
                                        })
                                    } else {
                                        layer.msg("添加失败！", {
                                            icon: 2,
                                            time: 1500
                                        })
                                    }
                                },
                                error: function() {

                                    layer.close(loadIndex);
                                    layer.msg("网络异常！", {
                                        icon: 2,
                                        time: 1500
                                    })
                                }
                            })
                        }
                    }
                },
                success: function() {
                    for (var i = 0; i < $(".val").length; i++) {
                        $(".val").eq(i).val(val[$(".val").eq(i).attr("field")]);
                    }
                    $(".app_num").on("blur", function() {
                        if (new RegExp($(this).attr("rexg")).test($(this).val()) || $(this).val() == "") {
                            $(this).parent().next().html("");
                            $(this).css("border", "solid 1px lightgray");
                            rex[Number($(this).attr("rexIndex"))] = 0;
                        } else {
                            $(this).parent().next().html("<span style='color:indianred'>" + $(this).attr("msg") + "</span>");
                            $(this).css("border", "solid 1px indianred");
                            rex[Number($(this).attr("rexIndex"))] = 1;
                        }
                    });
                    $(".app_num").on("input", function() {
                        $(this).parent().next().html("");
                        $(this).css("border", "solid 1px lightgray");
                        rex[Number($(this).attr("rexIndex"))] = 0;
                    });
                }
            });
        });
        renderTable();

        function renderTable() {
            laytab.render({
                elem: '#dhh-channel-manage-table',
                height: heigth,
                url: "/distributors/lists",
                method: "get",
                id: "usertable",
                response: {
                    statusName: "result",
                    msgName: 'tips' //规定状态信息的字段名称，默认：msg
                        ,
                    countName: 'total' //规定数据总数的字段名称，默认：count
                        ,
                    dataName: 'rows',
                    statusCode: 1 //规定成功的状态码，默认：0
                },
                request: {
                    pageName: 'page' //页码的参数名称，默认：page
                        ,
                    limitName: 'lines' //每页数据量的参数名，默认：limit
                },
                done: function(d) {
                    $(".layui-none").text(d.tips);
                },
                parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "result": res.result, //解析接口状态
                        "tips": res.tips, //解析提示文本
                        "total": res.total, //解析数据长度
                        "rows": res.rows //解析数据列表
                    }
                },
                cols: [
                    [{
                        title: "ID",
                        field: "uid"
                    }, {
                        title: "用户名",
                        field: "username"
                    }, {
                        title: "所属角色",
                        field: "mid",
                        unresize: true,
                        templet: function(d) {
                            if (d.mid == 0) {
                                return "管理员";
                            } else if (d.mid == 1) {
                                return "一级渠道商";
                            } else if (d.mid == 2) {
                                return "二级渠道商";
                            }
                        }
                    }, {
                        title: "注册时间",
                        field: "addtime"
                    }, {
                        title: "H5链接",
                        field: "h5_link"
                    }, {
                        title: "APP链接",
                        field: "app_link",
                        unresize: true,
                    }, {
                        title: "token查询链接",
                        field: "token_link"
                    }, {
                        title: "操作管理",
                        unresize: true,
                        width: "10%",
                        templet: function(d) {
                            if (d.have_sub != 0) {
                                return "<a class='click-opraty' title='点击查看渠道列表' index='" + d.uid + "'><i class='layui-icon-menu-fill layui-icon show' style='color:#393D49;'></i></a>" +
                                    "<a class='click-opraty' title='点击修改'><i class='layui-icon layui-icon-edit edit' d='" + JSON.stringify(d) + "' style='color:#393D49;'></i></a>" +
                                    "<a class='click-opraty' title='点击删除'><i class='layui-icon layui-icon-delete del' uid='" + d.uid + "' style='color:#393D49;'></i></a>";
                            } else {
                                return "<a class='click-opraty' title='点击修改'><i class='layui-icon layui-icon-edit edit' d='" + JSON.stringify(d) + "' style='color:#393D49;'></i></a>" +
                                    "<a class='click-opraty' title='点击删除'><i class='layui-icon layui-icon-delete del' uid='" + d.uid + "' style='color:#393D49;'></i></a>";
                            }

                        }
                    }]
                ],
                page: true,
                limits: [20, 50, 100],
                limit: 20,
                loading: true,
                skin: {
                    even: true
                },
            });
        }
        //点击查看
        $("#dhh-channel-manage").on("click", ".show", function(ev) {
            var indexVal = $(ev.target).parent().attr("index");
            var loadindex = null;
            layer.open({
                type: 1,
                shade: 0.6,
                btn: false,
                title: "查看渠道列表",
                area: [$(document).width() * 0.9 + "px", $(document).height() * 0.9 + "px"],
                content: "<table id='show-distributors' style='display:none;'></table>",
                success: function(r, index) {
                    laytab.render({
                        elem: '#show-distributors',
                        height: $("#show-distributors").height() - 40,
                        width: $("#show-distributors").width(),
                        url: "/distributors/sub_lists",
                        method: "get",
                        id: "usertables",
                        response: {
                            statusName: "result",
                            msgName: 'tips' //规定状态信息的字段名称，默认：msg
                                ,
                            countName: 'total' //规定数据总数的字段名称，默认：count
                                ,
                            dataName: 'rows',
                            statusCode: 1 //规定成功的状态码，默认：0
                        },
                        request: {
                            pageName: 'page' //页码的参数名称，默认：page
                                ,
                            limitName: 'lines' //每页数据量的参数名，默认：limit
                        },
                        done: function(d) {
                            $(".layui-none").text(d.tips);
                        },
                        where: {
                            uid: indexVal
                        },
                        parseData: function(res) { //res 即为原始返回的数据
                            return {
                                "result": res.result, //解析接口状态
                                "tips": res.tips, //解析提示文本
                                "total": res.total, //解析数据长度
                                "rows": res.rows //解析数据列表
                            }
                        },
                        cols: [
                            [{
                                title: "序号",
                                field: "uid",
                                unresize: true,
                            }, {
                                title: "用户名",
                                field: "username",
                                unresize: true,
                            }, {
                                title: "所属角色",
                                field: "mid",
                                unresize: true,
                                unresize: true,
                                templet: function(d) {
                                    if (d.mid == 0) {
                                        return "管理员";
                                    } else if (d.mid == 1) {
                                        return "一级渠道商";
                                    } else if (d.mid == 2) {
                                        return "二级渠道商";
                                    }
                                }
                            }, {
                                title: "注册时间",
                                field: "addtime",
                                unresize: true,
                            }, {
                                title: "H5链接",
                                field: "h5_link",
                                unresize: true,
                            }, {
                                title: "APP链接",
                                field: "app_link",
                                unresize: true,
                            }, {
                                title: "token查询链接",
                                field: "token_link",
                                unresize: true,
                            }]
                        ],
                        page: true,
                        limits: [20, 50, 100],
                        limit: 20,
                        loading: true,
                        skin: {
                            even: true
                        },
                    });

                }
            })
        });





    });
</script>